<template>
  <view class="container">
    <page-box>
      <view slot="content-top">
        <view class="white-box border-bottom">
          <view class="top-content border-top">
            <tabs :tabBars="tabBars" v-model="tabIndex" />
          </view>
        </view>
      </view>
      <view class="height100" slot="content-bottom">
        <swiper :current="tabIndex" class="swiper-box height100" :duration="300" @change="ontabchange">
          <swiper-item class="swiper-item" v-for="(tab, listIndex) in tabBars" :key="listIndex">
            <scroll-view class="height100" scroll-y :scroll-top="tab.top" :refresher-triggered="tab.refresh"
              @refresherrefresh="
                () => {
                  getList();
                }
              " refresher-enabled>
              <view v-if="!tab.list || tab.list.length == 0" :style="{
                opacity: tab.loading ? 0 : 1,
              }" class="empty">
                暂无数据
              </view>
              <view class="this-item flex-row flex-wrap flex-between">
                <view class="this-box" v-for="(item, index) in tab.list" :key="index" @click="toDetail(item)">
                  <view class="detail-theme">
                    办结情况：
                    <view :class="!item.completionStatus ? 'is-red' : 'is-gray'">{{
                      item.completionStatus | getDictTxt(statusList)
                    }}</view>
                  </view>
                  <view class="detail-theme">
                    工单编号：
                    <view>{{ item.number || "--" }}</view>
                  </view>
                  <view class="detail-theme" v-if="item.billTheme">工单主题：
                    <view>{{ item.billTheme || "--" }} -
                      {{ item.billThemeSub || "--" }}</view>
                  </view>
                  <view class="detail-theme" v-else>工单主题：<view>--</view>
                  </view>
                  <view class="detail-theme">
                    客户名称：
                    <view>{{ item.customName || "--" }}</view>
                  </view>
                  <view class="detail-theme">
                    联系方式：
                    <view>{{ item.customPhone || "--" }}</view>
                  </view>
                  <view class="detail-theme" v-if="!item.completionStatus">到期时间：<view class="is-red">{{
                    item.endTime | getDate
                      }}</view>
                  </view>
                  <view class="detail-theme" v-if="item.completionStatus">办结时间：<view>{{
                    item.completionTime | getDate
                      }}</view>
                  </view>
                </view>
              </view>
            </scroll-view>
          </swiper-item>
        </swiper>
      </view>
    </page-box>
  </view>
</template>

<script>
import { baseUrl, getOpenId, getDictTxt, getDate } from "@/static/js/utils.js";
import { getDict } from "@/api/system";
import { getList } from "@/api/hotline";
import tabs from "@/components/tabs";
const _tabBars = [
  { label: "全部工单", value: 0 },
  { label: "未办结工单", value: 1 },
  { label: "已办结工单", value: 2 },
];
export default {
  components: { tabs },
  data() {
    return {
      baseUrl,
      tabIndex: 0,
      tabBars: _tabBars.map(v => ({
        ...v,
        list: [],
        page: 0,
        top: 0,
        refresh: false,
        loading: false,
        stop: false,
      })),
      basePager: {
        page: 1,
        limit: 100,
      },
      statusList: [],
    };
  },
  computed: {},
  filters: { getDictTxt, getDate },
  watch: {},
  methods: {
    getDict() {
      getDict({
        data: { keyword: "order_completion_status" },
        callback: ({ data }) => {
          this.statusList = data;
        },
      });
    },
    ontabchange({ detail }) {
      const index = detail.current;
      this.tabIndex = index;
      let n = false;
      try {
        n = this.tabBars[index].stop ? 0 : false;
      } catch (error) { }
      this.getList(n);
      this.tabBars[index].top = 1;
      this.$nextTick(() => {
        this.tabBars[index].top = 0;
      });
    },
    getList(addPage = false) {
      if (!this.judgeLogin()) {
        return;
      }
      const chooseTab = this.tabBars[this.tabIndex] || this.tabBars[0];
      if ((chooseTab.stop || chooseTab.loading) && addPage) {
        return;
      }
      if (!addPage) {
        chooseTab.stop = false;
        chooseTab.page = this.basePager.page - 1;
        addPage === 0 ? null : (chooseTab.refresh = true);
      }
      chooseTab.page += 1;
      chooseTab.loading = true;
      getList({
        data: {
          transferStatus: true,
          pageSize: this.basePager.limit,
          pageNo: chooseTab.page,
        },
        callback: ({ data }) => {
          const rows = (data?.list || []).filter(
            (v) => v.receivingMan === "马山峰"
          );
          chooseTab.list =
            chooseTab.value === 0
              ? rows
              : rows.filter(
                (v) =>
                  v.completionStatus ===
                  (chooseTab.value === 2 ? true : false)
              );
          chooseTab.stop = true;
          chooseTab.refresh = false;
          chooseTab.loading = false;
        },
      });
    },
    setList(chooseTab, addPage, data) {
      let { list, count } = data;
      if (list.length == 0) {
        addPage ? null : (chooseTab.list = []);
        chooseTab.stop = true;
      } else {
        chooseTab.list = addPage
          ? [...chooseTab.list, ...(list || [])]
          : [...(list || [])];
        chooseTab.stop = count <= chooseTab.list.length;
      }
      chooseTab.refresh = false;
      chooseTab.loading = false;
      // console.log(chooseTab)
    },
    toDetail(data) {
      uni.navigateTo({
        url: "orderDetail?id=" + data?.id,
      });
    },
  },
  onLoad({ tab }) {
    const nTab = tab ? Number(tab) : 0;
    this.tabIndex = nTab;
    this.getDict();
    // this.getList();
    return;
    this.openid = getOpenId();
    try {
      // #ifdef APP-NVUE
      const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
      // #endif
      // #ifndef APP-NVUE
      const eventChannel = this.getOpenerEventChannel();
      // #endif
      // eventChannel.emit('acceptDataFromOpenedPage', {data: 'data from test page'});
      // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
      if (eventChannel) {
        eventChannel.on("setData", ({ tab }) => {
          const nTab = tab ? Number(tab) : 0;
          if (this.tabIndex === nTab) {
            this.getList();
          }
          this.tabIndex = nTab;
        });
      }
    } catch (error) {
      uni.navigateBack();
    }
  },
  onShow() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
@import './style/order.scss';
</style>
